<template>
    <div class="s-card">
        <div class="title-wrap">
            <div class="title">
                <div class="line"></div>
                <slot name="title"></slot>
            </div>
            <div class="more">
                <slot name="more"></slot>
            </div>
        </div>
        <div>
            <slot name="content"></slot>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.s-card {
    padding: 16px 20px;
    background-color: var(--background-color-white);
    border-radius: 8px;
    .title-wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .title {
            display: flex;
            align-items: center;
            font-weight: bold;
            margin-bottom: 10px;
            .line {
                width: 3px;
                height: 13px;
                background: var(--color-primary);
                border-radius: 8px 8px 8px 8px;
                margin-right: 4px;
            }
        }
        .more {
            font-size: 12px;
            color: var(--text-color-secondary);
            cursor: pointer;
        }
        .more:hover {
            color: var(--color-primary);
        }
    }
}
</style>
